<template>
  <div class="min-h serveProject bg-wt">
    <!-- 展示搜索框页面 -->
    <SearchForm
      :searchData="pagination"
      @handleClear="handleClear"
      @handleReset="handleReset"
      @handleSearch="handleSearch"
    ></SearchForm>

    <!-- 展示列表页面 
    定义属性和方法
    -->
    <TableList
      :data="data"
      :total="total"
      :pagination="pagination"
      :dataLoading="dataLoading"
      @onPageChange="onPageChange"
      @handleBulid="handleBulid"
      @handleEdit="handleEdit"
      @handle-click-delete="handleClickDelete"
      @handleForbidden="handleForbidden"
    ></TableList>

    <DialogForm
      ref="formRef"
      :title="title"
      :visible="visible"
      :data="formBaseData"
      @handleClose="handleClose"
      @handleAdd="handleAdd"
      @handleEdit="handleEditForm"
      
    ></DialogForm>
<!-- 删除弹窗 -->
 <Delete
 :visible="dialogDeleteVisible"
 :delete-text="operateText"
 @handle-delete="handleDelete"
 @handle-close="handleDeleteClose"
 ></Delete>
    <!-- end -->
    <!-- 禁用弹层 -->
    <Forbidden
      :visible="dialogVisible"
      :text="operateText"
      @handle-submit="handleForbiddenSub"
      @handle-close="handleForbiddenClose"
    ></Forbidden>
    <!-- end -->
  </div>
</template>
  
<script setup lang="jsx">
import { ref,onMounted } from 'vue';
//导入接口
import {
   getProjectList ,projectAdd,getProjectDetails,projectDelete,projectUpdate,projectStatus
  } from '@/api/serve'
import { MessagePlugin } from 'tdesign-vue-next'
// 禁用弹窗
import Forbidden from '@/components/Forbidden/index.vue'
//引入删除弹窗组件
import Delete from '@/components/OperateDialog/index.vue'
//引入列表页组件
import TableList from './components/TableList.vue'
//引入搜索框组件
import SearchForm from './components/SearchForm.vue'
//引入增改弹窗
import DialogForm from './components/DialogForm.vue';
const data = ref([]);
const total = ref(0);
const dataLoading = ref(false) // 加载中
const title=ref('') //弹窗标签
const formBaseData=ref({})//弹窗表单内容
const typeId = ref('') // 设置删除id
const operateText = ref('护理项目') // 要操作的内容提示
const dialogDeleteVisible = ref(false) //删除弹窗
const dialogVisible = ref(false) // 禁用弹窗
const typeStatus = ref(null) // 禁用启用
const statusText = ref('') // 启用禁用提示
const pagination = ref({
  pageSize: 10,
  pageNum: 1
})
//生命周期
onMounted(() => {
  getList()
})

//调用接口
const getList = async () => {
  const res = await getProjectList(pagination.value)
  data.value = res.data.records
  total.value = Number(res.data.total)
}

// 翻页设置当前页
const onPageChange = (val) => {
  pagination.value.pageNum = val.current
  pagination.value.pageSize = val.pageSize
  getList()
}

//判断当前参数是否包含小数点
const isDecimals = (val) => {
  if (String(val).indexOf('.') > -1) {
    return true;
  }
  return false;
}

//重置搜索框
const handleReset=()=>{
  //重置页码
  pagination.value={
    pageSize: 10,
    pageNum: 1
  }
  //重新查询列表
  getList();
}
//搜索按钮
const handleSearch=()=>{
  getList();
}
//清空按钮
const handleClear=(val)=>{
  if(val==='name'){
    delete pagination.value.name
  }else{
    delete pagination.value.status
  }
  getList();
}
//---------------------增改弹窗相关方法
//点击新增护理项目弹出窗口方法
//是否显示弹窗
var visible = ref(false)
//点击新增护理项目 按钮 把visible设置为true，弹出
const handleBulid = () =>{
 title.value = '新增'
  visible.value = true;
}
//点击弹窗中的关闭或取消，关闭弹窗
const handleClose = () =>{
  visible.value = false;
}
/* //新增点击事件增加项目
const handleAdd =async()=>{
  //远程调用新增护理接口
  const result= await projectAdd(val)
  //判断调用是否成功，成功返回数据code=200
  if(result.code==200){
  //成功提示新增成功
   MessagePlugin.success('新增成功')
  //重新分页查询
  getList()
  //关闭窗口
  handleClose()
  //清空数据
  formRef.value.handleClear()
  //失败
  }else{
    //提示失败消息
    MessagePlugin.success(result.msg)     
  }
    } */
 //调用新增接口
const handleAdd =async(val)=>{
  //调用接口
  const res=await projectAdd(val)
  if(res.code === 200){
    MessagePlugin.success('添加成功')
    //查询列表
    getList()
    //关闭弹窗
    handleClose()
    //清理弹窗中的内容，方便下次使用
    formRef.value.handleClear()
  }else{
    MessagePlugin.error(res.msg)
  }
}

//调用修改接口
const handleEdit=async(val)=>{
   //设置弹窗的标题
  title.value='编辑'
  //获取详情
  getDetails(val.id)
  //显示弹窗
  visible.value=true


/* const res=await projectUpdate(val)
if(res.code===200){
  MessagePlugin.success('修改成功')
  getList()
  handleClose()
  formRef.value.handleClear()
}else{
  MessagePlugin.error(res.msg)
} */
}
// 编辑
const handleEditForm = async (val) => {
  const res = await projectUpdate(val)
  if (res.code === 200) {
    MessagePlugin.success('编辑成功')
    getList()
    handleClose()
    formRef.value.handleClear()
  }
}
//根据id回显
const getDetails=async(id)=>{
    const res=await getProjectDetails(id)
    if(res.code===200){
      formBaseData.value=res.data
    }
}

//确定删除
const handleDelete =async ()=>{
  const res=await projectDelete(typeId.value)
  if(res.code ===200){
    dialogDeleteVisible.value=false
    MessagePlugin.success('删除成功')
    getList()
  }
}
//取消删除
 const handleDeleteClose =()=>{
  dialogDeleteVisible.value=false
 }
 //点击弹出删除框
const handleClickDelete =(val)=>{
  typeId.value=val.id
  dialogDeleteVisible.value=true
}
// 确定禁用
const handleForbiddenSub = async () => {
  const params = {
    id: typeId.value,
    status: typeStatus.value
  }
  const res = await projectStatus(params)
  if (res.code === 200) {
    dialogVisible.value = false
    MessagePlugin.success(statusText.value)
    getList()
  }
}
// 关闭禁用弹窗
const handleForbiddenClose = () => {
  dialogVisible.value = false
}
// 禁用弹窗
const handleForbidden = (val) => {
  
  typeId.value = val.id
  if (val.status === 1) {
    dialogVisible.value = true
    typeStatus.value = 0
    statusText.value = '禁用成功'
  } else {
    typeStatus.value = 1
    handleForbiddenSub()
    statusText.value = '启用成功'
  }
}



</script>